/*
 Disable class obfuscation for all CSS classes bellow.
*/
@external *;

@url iconLogo iconLogo;
@url headerLogo headerLogo;
@url svgIconLogout svgIconLogout;

/*
 Mordern clearfix for floats.
 To use this simply add "cf" styleName to the wrapper of floated elements.
*/

.cf:before, .cf:after
{
	content: " ";
	display: table;
}
.cf:after
{
	clear: both;
}
/* End of clearfix */

html, body
{
	width:100%;
	height:100%;
	background-color:#0a111f;
	color:#fff;
	font-family:'Source Sans Pro', sans-serif;
}

div
{
	font-family:'Source Sans Pro', sans-serif;
}

input, button, textarea, select
{
	transition:background 0.25s linear;
}

.c-btn
{
	background:#e3e3e3;
	color:#111d35;
	padding:10px 20px;
	font-size:13px;
	border-radius:3px;
	border:none;
	transition:transform 0.05s ease-in-out;
}

.c-btn:active
{
	
}

.c-btn.orange
{
	background:#c73e0d;
	color:#fff;
}

.c-btn:disabled
{
	background: rgba(255, 255, 255, 0.5);
	color: rgba(255, 255, 255, 0.3);
}

.c-logo
{
	width:316px;
	height:98px;
	background:iconLogo no-repeat;
	margin-bottom:40px;
}

.c-leftWrapper
{
	width:60%;
	float:left;
	margin-top:40px;
	padding:50px;
}
.c-rightWrapper
{
	width:40%;
	float:right;
	margin-top:145px;
	padding:50px;
}

.c-formWrapper
{
	border:1px solid #111d35;
	border-radius:4px;
	padding:20px;
	min-width:280px;
	max-width:425px;
	position:relative;
	height:170px;
}

.c-formWrapper:before
{
	content:'';
	width:50px;
	height:32px;
	background:svgIconLocker no-repeat center center #0a111f;
	background-size:32px auto;
	position:absolute;
	margin-top:-40px;
	left:50%;
	margin-left:-25px;
	
}

.crux-FormDisplay tr:last-child .formEntryData
{
	border:none;
}

.c-formWrapper .crux-FormDisplay
{
	width:100%;
}

.c-formWrapper button
{
	border-radius:3px;
}

.c-formWrapper input
{
	width:100%;
	margin-bottom:10px;
}
.c-formWrapper .gwt-Label
{
	margin-bottom:10px;
}

.c-formWrapper .c-loginButton
{
	background:#e3e3e3;
	color:#111d35;
	padding:10px 20px;
	font-size:13px;
}

.c-formWrapper .c-loginButton:hover
{
	background:#a5adc5;
}

.c-formWrapper .c-signUpButton
{
	position:absolute;
	left:0;
	margin-top:62px;
	width:100%;
	font-size:16px;
	background:#c73e0d;
	color:#fff;
	padding:15px 20px;
	margin-right:-20px;
}

.c-formWrapper .c-signUpButton:hover
{
	background:#9c2c00;
}


.c-formWrapper input, .c-formWrapper input:focus, .c-formWrapper input:hover,
.c-formWrapper button, .c-formWrapper button:focus, .c-formWrapper button:hover
{
	border:none !important;
	box-shadow:none !important;
}

.c-formWrapper input
{
	background:#060a13;
	border-radius:3px;
	padding:9px;
	color:#fff;
}

.c-formWrapper input:focus
{
	background:#677593;
}

.c-formWrapper .gwt-Label
{
	color:#fff;
	text-shadow:none;
	font-size:15px;
	margin-top:6px;
}

.c-introductionText
{
	font-size:17px;
	max-width:700px;
	line-height:30px;
	font-weight:lighter;
	text-align:justify;
	opacity:0;
}

.c-orLabel
{
	font-family:'Clicker Script', cursive;
	color:#6585c4;
	font-size:1.8em;
	margin:0px auto;
	text-align:center;
	position: absolute;
	left: 50%;
	margin-left: -10px;
	margin-top: 20px;
}
.c-orLabel:before
{
	position:absolute;
	content:'';
	width:58px;
	height:1px;
	background:#273553;
	top: 19px;
	margin-left:-69px;
}
.c-orLabel:after
{
	position:absolute;
	content:'';
	width:58px;
	height:1px;
	background:#273553;
	top: 19px;
	margin-left:13px;
}
.c-footerCopyright
{
	font-size:13px;
	color:#4069bc;
	padding:20px 0;
}
.header
{
	border-bottom:1px solid #040912;
	box-shadow:0 -4px 0 rgba(4, 9, 18, 0.26) inset, 0 1px 2px rgba(0, 0, 0, 0.2);
	padding:10px 0;
	position:relative;
}
.header-logo
{
	width:188px;
	height: 55px;
	background:headerLogo no-repeat;
	margin-left:20px;
	display:block;
	float:left;
}
.header-menu
{
	float:left;
	margin-left:5%;
	margin-top:20px;
}
.header-menu button
{
	border:none;
	background:none;
	color:#4069bc;
	font-size:14px;
	padding:0 20px;
	border-right:1px solid #040912;
	transition:color 0.2s linear;
}
.header-menu button:hover
{
	color:#fff;
}
.header-menu button:last-child
{
	border-right:none;
}
.header-logout
{
	padding:20px;
	background:#070d18;
	height:100%;
	position:absolute;
	right:0;
	top:0;
	padding-right:70px;
}
.logout-label
{
	color:#fff;
	display:block;
	font-size:12px;
}
.logout-username
{
	color:#4069bc;
	font-size:15px;
	display:block;
	margin-top:2px;
}
.c-btn.logout-btn
{
	width:34px;
	height:37px;
	position:absolute;
	right:15px;
	top:19px;
	background:svgIconLogout no-repeat center center #c73e0d;
	background-size:16px 16px;
	text-indent:-9999px;
}
.c-btn.logout-btn:hover
{
	background:svgIconLogout no-repeat center center #9C2C00 !important;
	background-size:16px 16px !important;
}
.stats-items
{
	width:16.66666666667%;
	border-radius:4px;
	padding:15px;
	margin:7% 0;
	text-align:center;
	float:left;
}
.stats-items .faces-Label:first-child
{
	font-size:40px;
	font-weight:lighter;
}
.stats-items .faces-Label:second-child
{
	font-size:15px;
	font-weight:normal;
}
.view-title
{
	font-size:40px;
	text-align:center;
	font-weight:lighter;
	color:#fff;
	margin-top:4%;
}
.content
{
	max-width:800px;
	min-width:1%;
	margin:4% auto;
}
.content.styled
{
	border:1px solid #111D35;
	border-radius:5px;
}
.content.styled .crux-FormDisplay
{
	width:100%;
}
.txt-box, .sel-box
{
	padding:8px;
}
.content.styled .gwt-Label, .content.styled .txt-box, .content.styled .sel-box
{
	margin:10px 10px 20px;
	width:literal("calc(100% - 20px)") !important;
}
.content.styled.onlyone .txt-box, .content.styled.onlyone .gwt-Label
{
	margin:10px;
}
.crud-btns
{
	text-align:right;
	background:rgba(255,255,255,0.02);
	padding:10px;
	border-top:1px solid rgba(255,255,255,0.05);
	border-radius:0 0 5px 5px;
}
.crud-btns .c-btn
{
	margin-left:2px;
}
.sub-menu
{
	background:rgba(0,0,0,0.3);
	padding:8px;
	text-align:center;
	border-radius:0 0 5px 5px;
	margin-top:0;
	position:relative;
}
.sub-menu button
{
	background:none;
	border:none;
	color:#fff;
	font-size:14px;
	margin-right:10px;
}
.sub-menu button:hover
{
	color:#c73e0d;
}
.action-btns button
{
	border-radius:0;
	margin-right:1px;
	padding:5px 6px;
	font-size:11px;
}
.action-btns button:first-child
{
	border-radius:3px 0 0 3px;
}
.action-btns button:last-child
{
	border-radius:0 3px 3px 0;
}
.crux-Grid
{
	border-radius: 5px;
}
.crux-Grid > div > table > tbody > tr:first-child > td
{
	padding: 8px;
	background: rgba(255,255,255,0.2);
	box-shadow: -1px 0 0 rgba(0,0,0,0.5);
}
.back-btn
{
	width:16px;
	height:16px;
	background:svgIconArrowBack no-repeat !important;
	background-size:100% auto;
	position:absolute;
	left:11px;
	top:10px;
}
.row:nth-child\(even\) td
{
	background:rgba(0,0,0,0.3);
}
.row:nth-child\(n\+2\) td:nth-child\(odd\)
{
	box-shadow:0 0 0 100px rgba(255,255,255, 0.02) inset;
}
.row td .gwt-Label{
	margin:10px !important;
}
.cancel
{
	float:left;
}
.header-menu-button
{
	display:none;
}